/* RESPONSIVE GRID SYSTEM =============================================================================  */

/* BASIC PAGE SETUP ============================================================================= */

body
{
    margin: 0 auto;
    padding: 0;
    font: 100%/1.4 'Times New Roman', 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
    color: #666;
    background: #fff left top;
}

button,
input,
select,
textarea
{
    font-family: 'Times New Roman', MuseoSlab100, lucida sans unicode, 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
    color: #333;
}

/*  HEADINGS  ============================================================================= */

h1, h2, h3, h4, h5, h6
{
    font-family: 'Times New Roman', MuseoSlab300, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
    font-weight: normal;
    margin-top: 0px;
    letter-spacing: -1px;
}

h1
{
    font-family: 'Times New Roman', LeagueGothicRegular, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
    margin-bottom: 0.2em;
    font-size: 6em; /* 96 / 16 */
    line-height: 1.4;
}


h2
{
    font-size: 1em; /* 40 / 16 */
    line-height: 1.8;
}

h3
{
    margin-bottom: 0.3em;
    letter-spacing: -1px;
    font-size: 1.75em; /* 28 / 16 */
    line-height: 1.3;
}


h4
{
    margin-bottom: 0.5em;
    font-size: 1.5em; /* 24 / 16  */
    line-height: 1.25;
}

footer h4
{
    color: #ccc;
}

h5
{
    color: #555;
    margin-bottom: 1.25em;
    font-size: 1em; /* 20 / 16 */
}

h6
{
    color: #666;
    font-size: 1em; /* 16 / 16  */
}

/*  TYPOGRAPHY  ============================================================================= */

p, ol, ul, dl, address
{
    margin-bottom: 1.5em;
    font-size: 1em; /* 16 / 16 = 1 */
}

p
{
    hyphens: auto;
}


    p.introtext
    {
        font-family: MuseoSlab100, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
        font-size: 2.5em; /* 40 / 16 */
        color: #333;
        line-height: 1.4em;
        letter-spacing: -1px;
        margin-bottom: 0.5em;
    }


    p.handwritten
    {
        font-family: HandSean, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
        font-size: 1.375em; /* 24 / 16 */
        line-height: 1.8em;
        margin-bottom: 0.3em;
        color: #666;
    }

    p.center
    {
        text-align: center;
    }


.and
{
    font-family: GoudyBookletter1911Regular, Georgia, Times New Roman, sans-serif;
    font-size: 1.5em; /* 24 / 16 */
}

.heart
{
    font-family: Pictos;
    font-size: 1.5em; /* 24 / 16 */
}

ul,
ol
{
    margin: 0 0 1.5em 0;
    padding: 0 0 0 24px;
    list-style-type: none;
}

li ul,
li ol
{
    margin: 0;
    font-size: 1em; /* 16 / 16 = 1 */
}

dl,
dd
{
    margin-bottom: 1.5em;
}

dt
{
    font-weight: normal;
}

b, strong
{
    font-weight: bold;
}

hr
{
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
}

small
{
    font-size: 1em; /* 16 / 16 = 1 */
}

sub, sup
{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup
{
    top: -.5em;
}

sub
{
    bottom: -.25em;
}

.subtext
{
    color: #666;
}

/* LINKS =============================================================================  */

a
{
    color: #cc1122;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
}

    a:visited
    {
        color: #ee3344;
    }

    a:focus
    {
        outline: thin dotted;
        color: rgb(0,0,0);
    }

    a:hover,
    a:active
    {
        outline: 0;
        color: #dd2233;
    }


footer a
{
    color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    footer a:visited
    {
        color: #fff;
    }

    footer a:focus
    {
        outline: thin dotted;
        color: rgb(0,0,0);
    }

    footer a:hover,
    footer a:active
    {
        outline: 0;
        color: #fff;
    }


/* IMAGES ============================================================================= */

img
{
    border: 0;
    max-width: 100%;
}

    img.floatleft
    {
        float: left;
        margin: 0 10px 0 0;
    }

    img.floatright
    {
        float: right;
        margin: 0 0 0 10px;
    }


/* TABLES ============================================================================= */

table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1.4em;
    width: 100%;
}

th, td, caption
{
    padding: .25em 10px .25em 5px;
}

tfoot
{
    font-style: italic;
}

caption
{
    background-color: transparent;
}

/* FORMS ============================================================================= */

form
{
    margin: 0;
}

fieldset
{
    margin-bottom: 1.5em;
    padding: 0;
    border-width: 0;
}

legend
{
    *margin-left: -7px;
    padding: 0;
    border-width: 0;
}

label
{
    font-weight: normal;
    cursor: pointer;
    display: block;
    margin: 10px 0 0 0;
    position: relative;
    top: 0;
    left: 0;
}

    label.inline
    {
        display: inline;
        margin: 0;
    }

    label span
    {
        color: #666;
        font-size: 0.6em;
    }

        label span.right
        {
            position: absolute;
            bottom: 0;
            right: 1em;
            text-align: right;
        }

    label.disabled
    {
        color: #ccc;
    }


button,
search,
input,
select,
textarea
{
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}

button, input
{
    line-height: normal;
    *overflow: visible;
}

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"]
    {
        padding: 0.1em .5em;
        cursor: pointer;
        text-shadow: 0 1px 0 #fff;
    }

    input[type="checkbox"],
    input[type="radio"]
    {
        box-sizing: border-box;
    }

    input[type="search"]
    {
        box-sizing: content-box;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner
    {
        padding: 0;
        border: 0;
    }

input[type="text"], input[type="password"]
{
    display: block;
    width: 97%;
    border: 1px solid #ccc;
    font-size: 1em;
    padding: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    -moz-box-shadow: inset 0px 0px 6px #ccc;
    -webkit-box-shadow: inset 0px 1px 6px #ccc;
    box-shadow: inset 0px 1px 6px #ccc;
}

select
{
    display: block;
    width: 99%;
    border: 1px solid #ccc;
    font-size: 1em;
    padding: 1px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    -moz-box-shadow: inset 0px 0px 6px #ccc;
    -webkit-box-shadow: inset 0px 1px 6px #ccc;
    box-shadow: inset 0px 1px 6px #ccc;
}

input::-webkit-input-placeholder,
input:-moz-placeholder,
.placeholder
{
    color: #bbb;
}

input::-moz-focus-inner
{
    border: 0;
}

input[disabled="disabled"], input.disabled
{
    color: #999;
    background: #f5f5f5;
    -moz-box-shadow: inset 0px 0px 2px #ddd;
    -webkit-box-shadow: inset 0px 1px 2px #ddd;
    box-shadow: inset 0px 1px 2px #ddd;
}

textarea
{
    width: 97%;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
    font-family: inherit;
    font-size: 0.9em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 0px 0px 6px #ccc;
    -webkit-box-shadow: inset 0px 1px 6px #ccc;
    box-shadow: inset 0px 1px 6px #ccc;
    overflow: auto;
    vertical-align: top;
}

    /* Colors for form validity */
    input:valid,
    textarea:valid
    {
        /* Styles */
    }

    input:invalid,
    textarea:invalid
    {
        -webkit-box-shadow: 0 0 2px #f00;
        -moz-box-shadow: 0 0 2px #f00;
        box-shadow: 0 0 2px #f00;
    }

.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid
{
    background-color: #ccc;
}



/*  MAIN LAYOUT	============================================================================= */

#skiptomain
{
    display: none;
}

#wrapper
{
    width: 100%;
    position: relative;
    text-align: left;
}

#headcontainer
{
    width: 100%;
    background: url(/images/headerback.png) no-repeat center top;
}

header
{
    clear: both;
    width: 80%; /* 1000px / 1250px */
    font-size: 0.8125em; /* 13 / 16 */
    max-width: 92.3em; /* 1200px / 13 */
    margin: 0 auto;
    padding: 130px 0px 10px 0px;
    position: relative;
    color: #000;
    text-align: center;
}




#maincontentcontainer
{
    width: 100%;
}

.standardcontainer
{
}

.darkcontainer
{
    background: rgba(102, 102, 102, 0.05);
}

.lightcontainer
{
    background: rgba(255, 255, 255, 0.25);
}

#maincontent
{
    clear: both;
    width: 80%; /* 1000px / 1250px */
    font-size: 0.8125em; /* 13 / 16 */
    max-width: 92.3em; /* 1200px / 13 */
    margin: 0 auto;
    padding: 1em 0px;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

.maincontent
{
    clear: both;
    width: 80%; /* 1000px / 1250px */
    font-size: 0.8125em; /* 13 / 16 */
    max-width: 92.3em; /* 1200px / 13 */
    margin: 0 auto;
    padding: 1em 0px;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

#footercontainer
{
    width: 100%;
    border-top: 1px solid #000;
    background: #222 url(/images/footerback.png) left top;
}

footer
{
    clear: both;
    width: 80%; /* 1000px / 1250px */
    font-size: 0.8125em; /* 13 / 16 */
    max-width: 92.3em; /* 1200px / 13 */
    margin: 0 auto;
    padding: 20px 0px 10px 0px;
    color: #999;
}

    footer strong
    {
        font-size: 1.077em; /* 14 / 13 */
        color: #aaa;
    }


    footer a:link, footer a:visited
    {
        color: #999;
        text-decoration: underline;
    }

    footer a:hover
    {
        color: #fff;
        text-decoration: underline;
    }

ul.pagefooterlist, ul.pagefooterlistimages
{
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

    ul.pagefooterlist li, ul.pagefooterlistimages li
    {
        clear: left;
        margin: 0px;
        padding: 0px 0px 3px 0px;
        display: block;
        line-height: 1.5em;
        font-weight: normal;
        background: none;
    }

    ul.pagefooterlistimages li
    {
        height: 34px;
    }


        ul.pagefooterlistimages li img
        {
            padding: 5px 5px 5px 0px;
            vertical-align: middle;
            opacity: 0.75;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
            filter: alpha( opacity = 75);
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        ul.pagefooterlistimages li a
        {
            text-decoration: none;
        }

            ul.pagefooterlistimages li a:hover img
            {
                opacity: 1.0;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                filter: alpha( opacity = 100);
            }

#smallprint
{
    margin-top: 20px;
    line-height: 1.4em;
    text-align: center;
    color: #999;
    font-size: 0.923em; /* 12 / 13 */
}

    #smallprint p
    {
        vertical-align: middle;
    }

    #smallprint .twitter-follow-button
    {
        margin-left: 1em;
        vertical-align: middle;
    }

    #smallprint img
    {
        margin: 0px 10px 15px 0px;
        vertical-align: middle;
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha( opacity = 50);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }


    #smallprint a:hover img
    {
        opacity: 1.0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha( opacity = 100);
    }

    #smallprint a:link, #smallprint a:visited
    {
        color: #999;
        text-decoration: none;
    }

    #smallprint a:hover
    {
        color: #999;
        text-decoration: underline;
    }


/*  SECTIONS  ============================================================================= */

.section
{
    clear: both;
    padding: 0px;
    margin: 0 auto;
    width: 97%;
}


/*  CODE  ============================================================================= */

pre.code
{
    padding: 0;
    margin: 0;
    font-family: monospace;
    white-space: pre-wrap;
    font-size: 1.1em;
}

strong.code
{
    font-weight: normal;
    font-family: monospace;
    font-size: 1.2em;
}


/*  EXAMPLE  ============================================================================= */

#example .col
{
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);
}

/*  NOTES  ============================================================================= */


.note
{
    position: relative;
    padding: 1em 1.5em;
    margin: 0 0 1em 0;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

    .note:before
    {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 16px 16px 0;
        border-style: solid;
        border-color: transparent transparent #cccccc #cccccc;
        background: #cccccc;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        display: block;
        width: 0; /* Firefox 3.0 damage limitation */
    }

    .note.rounded
    {
        -webkit-border-radius: 5px 0 5px 5px;
        -moz-border-radius: 5px 0 5px 5px;
        border-radius: 5px 0 5px 5px;
    }

        .note.rounded:before
        {
            border-width: 8px;
            border-color: #fff #fff transparent transparent;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius: 0 0 0 5px;
            border-radius: 0 0 0 5px;
        }

/*  SCREENS  ============================================================================= */

.siteimage
{
    max-width: 80%;
    padding: 5%;
    margin: 0 0 1em 0;
    background: transparent;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

    .siteimage:hover
    {
        background: #bbb;
        position: relative;
        top: -2px;
    }

/*  COLUMNS  ============================================================================= */

.twocolumns
{
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
}

/*  BUTTONS  ============================================================================= */


.button
{
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: .5em 1em;
    margin: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background: #cc1122 url(/images/glass.png) repeat-x 0 50%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: LeagueGothicRegular, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
    font-size: 1.5em; /* 24 / 16 */
}

    .button:hover
    {
        background: #dd2233 url(/images/glass.png) repeat-x 0 50%;
        color: #fff;
        text-decoration: none;
    }

    .button:active
    {
        background: #dd2233 url(/images/glass.png) repeat-x 0 50%;
        color: #fff;
        position: relative;
        top: 1px;
    }

    .button:visited
    {
        color: #fff;
    }



/*  GLOBAL OBJECTS ============================================================================= */

.breaker
{
    clear: both;
}

.group:before,
.group:after
{
    content: "";
    display: table;
}

.group:after
{
    clear: both;
}

.group
{
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


.floatleft
{
    float: left;
}

.floatright
{
    float: right;
}


/* VENDOR-SPECIFIC ============================================================================= */

html
{
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgb(52,158,219);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.clearfix
{
    zoom: 1;
}

::-webkit-selection
{
    background: rgb(23,119,175);
    color: rgb(250,250,250);
    text-shadow: none;
}

::-moz-selection
{
    background: rgb(23,119,175);
    color: rgb(250,250,250);
    text-shadow: none;
}

::selection
{
    background: rgb(23,119,175);
    color: rgb(250,250,250);
    text-shadow: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"]
{
    -webkit-appearance: button;
}

::-webkit-input-placeholder
{
    font-size: .875em;
    line-height: 1.4;
}

input:-moz-placeholder
{
    font-size: .875em;
    line-height: 1.4;
}

.ie7 img,
.iem7 img
{
    -ms-interpolation-mode: bicubic;
}

input[type="checkbox"],
input[type="radio"]
{
    box-sizing: border-box;
}

input[type="search"]
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0;
    border: 0;
}

p
{
    /* http://www.w3.org/TR/css3-text/#hyphenation */
    -webkit-hyphens: auto;
    -webkit-hyphenate-character: "\2010";
    -webkit-hyphenate-limit-after: 1;
    -webkit-hyphenate-limit-before: 3;
    -moz-hyphens: auto;
}

.search-box
{
    padding: 10px !important;
    border: 3px solid #c8d7dc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

    .search-box .search-button
    {
        border: 1px solid #cfe7fa;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

.register-box
{
    background: #a0d8ef;
    margin: 5px 10px;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #cfe7fa;
}

    .register-box h2
    {
        font-weight: bold;
        font-size: 1.6em;
        color: #dd2233;
    }

#jwplayer_wrapper
{
    margin: 5px auto;
    padding: 0;
}

.box-layout
{
    margin: 5px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid #c8d7dc;
}

    .box-layout .header-box h2
    {
        background: #f9fcf7; /* Old browsers */
background: -moz-linear-gradient(top,  #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#f5f9f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9fcf7 0%,#f5f9f0 100%); /* W3C */
    }

    .box-layout ul
    {
        list-style-type: none;
        margin: 8px;
        padding: 0;
        text-align: left;
    }
        .box-layout ul li div
        {
            font-size: 9pt;
            font-style: italic;
            border-bottom: 1px dashed #999;
        }
    .box-layout ul li a
    {
        text-decoration: none;
        color: blue;
    }
    .box-layout ul li a:hover
    {
        color: #666;
    }
